import React, { Component } from 'react'
import axios from 'axios'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import Animal from '../../component/animal/animal'
import {Banner,AnimalItem} from '../../types/main'
import MainCss from './main.module.css'
import {NavLink} from 'react-router-dom'
import {connect} from 'react-redux'


interface IState{
    banner: Banner[],
    types:string[],
    chooseId:number //选择类型
}

interface IProps{
    history:any,
    initDate:(list:AnimalItem) => void,
    list:AnimalItem[]
}

class Main extends Component<IProps,IState> {
    state = {
        banner:[],
        list:[],
        types:['全部','狗狗','猫猫','其他'],
        chooseId:0
    }
    componentDidMount(){
        //请求banner数据
        this.getBanner();
        //获取列表数据
        !this.props.list.length && this.getList();
    }
    //获取banner数据
    getBanner = () => {
        axios.get('/api/banner').then(res => {
            console.log(res.data.code);
            if(res.data.code === 10000){
                //setState异步方法  确保数据已经设置完毕，必须要再回调函数内部去实例化
                this.setState({
                    banner:res.data.data
                },() => {
                    new Swiper('.swiper-container', {
                        autoplay: true,//可选选项，自动滑动
                        pagination: {
                            el: '.swiper-pagination',
                        }
                    })
                })
            }
        })
    }

    //获取列表数据

    getList = () => {
        axios.get('/api/list').then(res => {
            console.log(res.data.data)
            if(res.data.code === 10000){
                // this.setState({
                //     list:res.data.data
                // })
                this.props.initDate(res.data.data);
            }
        })
    }
    render() {
        let {banner,types,chooseId} = this.state;
        let {list} = this.props;
        let filterList = chooseId === 0 ? list : list.filter((item:AnimalItem) => item.pet_breed === chooseId)
        return (
            <div>
                <div className="swiper-container">
                    <div className="swiper-wrapper">
                        {banner && banner.map((item:Banner) => <div key={item.id} className="swiper-slide banner">
                            <img src={item.image} alt=""/>
                        </div>)}
                    </div>
                    <div className="swiper-pagination"></div>
                </div>
                <div className="con">
                    <div className={MainCss.types}>
                        {types.map((item,index) =>  <span className={chooseId===index ? MainCss.active: ''} key={item} onClick={() => {
                            this.setState({
                                chooseId:index
                            })
                        }}>{item}</span>)}
                       
                    </div>
                    <div className="list-wrap">
                        {filterList && filterList.map((item:AnimalItem) => <Animal key={item.id} item={item}></Animal>)}
                    </div>
                </div>
                <footer>
                    <NavLink to="/main">首页</NavLink>  
                    <NavLink to="/public">发布</NavLink>         
                </footer>
            </div>
        )
    }

    
}

let stateMapToProps = (state:any) => {
    return {
        list:state.list
    }
}

let dispatchMapToProps = (dispatch:any) => {
    return {
        initDate(list:AnimalItem){
            dispatch({type:'INIT_DATA',list})
        }
    }
}



export default connect(stateMapToProps,dispatchMapToProps)(Main)
